DiyType3.vue

<template>
    <div>
        <v-container>
            <v-row class="py-6 px-2 grid-btn mt-0" style="padding-bottom: 0 !important">
                <v-col cols="4" :key="i" class="d-inline-flex justify-center" style="margin-bottom: 30px" v-for="(item, i) in data.targetItem">
                    <v-btn
                        link
                        block
                        plain
                        :ripple="false"
                    >
                        <div class="text-center">
                            <v-img :src="item.url" style="height: 56px; width: 56px; " ></v-img>
                            <div>{{item.text}}</div>
                        </div>
                    </v-btn>
                </v-col>
            </v-row>
        </v-container>

        <v-btn icon @click="handleClick" style="left: 50px">
            <v-icon>mdi-delete</v-icon>&nbsp;&nbsp;删除组件
        </v-btn>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
        },
        id: {
            type: Number,
        }
    },
    methods: {
        handleClick() {
            this.$emit('del');
        },
    },
};
</script>
